<template>
  <div class="search">
    <nav-bar>
      <span slot="text">搜索</span>
    </nav-bar>
    <section class="container">
      <div class="search_form">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="请输入店铺名称" v-model="value" />
        <button class="right" @click="search">提交</button>
      </div>
      <!-- 店铺列表组件 -->
      <shop-list :shop="shopList" />
      <!-- 搜搜历史 -->
      <section class="search_history" v-if="isHistory">
        <header class="clearfix">
          <p class="left">搜索历史</p>
          <i class="iconfont icon-shanchu right" @click="removeHistory"></i>
        </header>
        <ul class="history_list" v-if="searchHistory.length">
          <li
            v-for="(item, index) in searchHistory"
            :key="index"
            @click="selectHistory(item)"
          >
            {{ item }}
          </li>
        </ul>
      </section>
      <div class="search_null" v-if="isSearch">很抱歉！无搜索结果</div>
    </section>
  </div>
</template>

<script>
import ShopList from '@/components/content/shoplist/ShopList';

import { searchShop } from '@/network/getData';
import { Local } from '@/common/storage';

export default {
  data() {
    return {
      value: '',
      searchHistory: [],
      shopList: [],
      isHistory: true,
      isSearch: false
    };
  },
  components: { ShopList },
  mounted() {
    this.searchHistory = Local.get('searchHistory') || [];
  },
  methods: {
    async search() {
      this.isHistory = false;
      const res = await searchShop(this.value);
      this.shopList = res.data;
      this.isSearch = !this.shopList.length;

      if (this.searchHistory.length) {
        let flag = false;
        this.searchHistory.forEach(item => {
          if (item === this.value) {
            flag = true;
          }
        });
        if (!flag) {
          this.searchHistory.push(this.value);
        }
      } else {
        this.searchHistory.push(this.value);
      }
      Local.set('searchHistory', this.searchHistory);
    },
    selectHistory(item) {
      this.value = item;
      searchShop(item).then(res => {
        this.shopList = res.data;
        this.isSearch = !this.shopList.length;
        this.isHistory = false;
      });
    },
    removeHistory() {
      Local.remove('searchHistory');
      this.searchHistory = [];
    }
  },
  watch: {
    value() {
      if (this.value === '') {
        this.shopList = [];
        this.isHistory = true;
        this.isSearch = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  bottom: 0;
}
.search_form {
  padding: 10px;
  background-color: #fff;
  input {
    height: 30px;
    width: 76%;
    text-indent: 30px;
    font-size: 15px;
    border-radius: 5px;
    background-color: #eee;
  }
  button {
    padding: 6px 15px;
  }
  i {
    position: absolute;
    top: 16px;
    left: 16px;
  }
}

.search_history {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px;
  p {
    font-size: 15px;
  }
  .history_list {
    margin-top: 10px;
    li {
      display: inline-block;
      padding: 2px 5px;
      margin: 5px 0;
      margin-right: 10px;
      font-size: var(--font-min);
      border: 1px solid #ccc;
    }
  }
}
.search_null {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
